<!-- 学社 - 自动回复 -->
<template>
  <view>
    <z-navbar title="自动回复" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
    <view class="px-4 pt-5">
      <view class="flex justify-between">
        <view class="c-#333 text-28 font-bold">成员加入自动回复</view>
        <image class="w-80 h-36" @click="state.isOpen = !state.isOpen"
          :src="`/static/images/home/ic_${state.isOpen ? 'open' : 'close'}.png`"></image>
      </view>
      <view class="c-#999 text-28 mt-1 mb-3">开启后，新加入的用户将会收到你设置的通知</view>
      <view class="relative">
        <u-input v-model="state.content" type="textarea" height="240" auto-height placeholder="自动回复内容"
          :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
        <view class="absolute bottom-30 right-30 z-2 c-#999 text-24">{{ enteredNum }}/{{ state.maxInputNum }}</view>
        <u-line color="#E5E5E5" />
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="btn-submit" @click="onSubmit">保存</view>
    </view>
  </view>
</template>
<script setup>
import { showToast } from '@/common/util/uni'
import { refreshPrePage } from '@/common/util/util'
import { getMemberDetail, postClubProfileAutoResponse } from '@/common/http/module/society.js'
import { onLoad } from '@dcloudio/uni-app';

const state = reactive({
  isOpen: 1, // 是否开启自动回复
  content: '',
  maxInputNum: 100,
})

const inputStyle = {
  backgroundColor: '#F6F6F6',
  borderRaduis: '12rpx',
  padding: '30rpx'
}

const enteredNum = computed(() => {
  return state.content.length > 100 ? 100 : state.content.length
})

// 保存
function onSubmit () {
  postClubProfileAutoResponse({
    club_id: state.club_id,
    response: state.content,
    auto_response: state.isOpen
  }).then(() => {
    showToast('保存成功')
    refreshPrePage('loadDetail')
    setTimeout(() => uni.navigateBack(), 600)
  })
}

function loadDetail () {
  getMemberDetail(state.club_id).then((res) => {
    const { info: { auto_response, response } } = res.data
    state.isOpen = auto_response
    state.content = response
  });
}

onLoad(options => {
  console.log('options', options);
  state.club_id = options.club_id ?? ''
  loadDetail()
})
</script>

<style lang="scss" scoped></style>
